<template>
<div>
  <mu-dialog :open="dialog"  @close="close">
    <div class="sheet">
      <div class="sheet-container">
        <mu-table :fixedFooter="false" :selectable="false" :showCheckbox="false">
          <mu-tbody>
            <mu-tr v-for="value,key,index in datas" :key="value.id">
              <mu-td class="sheet-type">{{key}}</mu-td>
              <mu-td class="sheet-content">{{value}}</mu-td>
            </mu-tr>
            <hr class="mu-divider">
          </mu-tbody>
        </mu-table>
      </div>
      <img src="../assets/bottom-tear.svg" class="sheet-bottom-tear">
    </div>
    <mu-flat-button slot="actions" @click="showToast(1)" primary label="预约"/>
    <mu-flat-button slot="actions" primary @click="showToast(0)" label="取消预约"/>
  </mu-dialog>
  </div>
</div>
</template>

<script>
import {bus} from '../bus'
export default {
  data () {
    return {
      dialog: false,
      toast: false,
      content: "",
      datas:{}
    }
  },
  methods: {
    open(val,day) {
      this.dialog = true
      this.datas = this.$store.state.datas.classes[day].info[val]
    },
    close () {
      this.dialog = false
    },
    showToast (tag) {
      if(tag == 0){
        this.content = "取消成功"
      }else if(tag == 1){
        this.content = "预约成功"
      }else{
        return
      }
      bus.$emit('openSysToast',this.content)
    }
  }
}
</script>

<style>
.mu-dialog {
  width: 94%;
}
.mu-dialog-body{
  padding: 10px 10px 0px;
}
.sheet{
  height: 100%;
}
.sheet .sheet-container{
  height: 300px;
  width: 100%;
  margin: 0 auto;
  border: 1px solid #d9d9d9;
  border-radius: 3px 3px 0px 0px;
  border-bottom: none;
  position: relative;
  overflow: scroll !important;
}
.sheet .sheet-bottom-tear{
  position: relative;
  top: -10px;
}
.mu-dialog-actions {
  position: relative;
  top: -10px;
}
.sheet-type{
  width: 30%;
  border-right: 1px solid #d9d9d9;
}
.sheet-content{
  width: 70%;
}
.mu-toast{
  text-align: center;
  position: fixed;
}
</style>